import {useState} from 'react';
import {Button, Input, Drawer, Space, DatePicker, Form, ConfigProvider} from 'antd';
import axios from "axios";

import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn';

dayjs.locale('zh-cn');

const Btn = (props) => {
    const [open, setOpen] = useState(false);
    const showDrawer = () => {
        setOpen(true);
    };

    //定义Drawer 新增确定按钮
    const [form] = Form.useForm();

    const addConfirm = (values) => {
        form.validateFields()
            .then((values) => {
        setOpen(false);
        const formData = form.getFieldValue()
        axios.post('/api/data/Add', formData)
            .then(req => {
                props.onChange(req.data.data, req.data.sum);
                form.resetFields()
            })
            .catch(error => {
                console.error('出错了:', error);
            });
        })
        .catch(errorInfo => {
            console.error('验证失败:', errorInfo);
        });
    };

    // 定义Drawer  取消按钮
    const onClose = (values) => {
        setOpen(false);
        form.resetFields()
    };

    //定义input事件
    const handleInput = (e) => {
        axios.post('/api/data/input', e.target.value)
            .then((req) => {
                if (req.data.data) {
                    props.onChange([req.data.data], req.data.sum)
                } else if (e.target.value === '') {
                    props.inputEvent(req.data.originData, req.data.sum)
                } else {
                    console.log("没有哦")
                }
            })
            .catch(error => {
                console.error('出错了:', error);
            });
    };

    return (
        <ConfigProvider locale={locale}>
            <div style={{display: 'flex', margin: '0px 17px', width: '100%'}}>
                <Button type="primary" onClick={showDrawer}> + 新增分组 </Button>
                <Input allowClear placeholder="关键字搜索"
                       style={{width: '32%', marginLeft: "18px"}}
                       onBlur={handleInput}>
                </Input>
                <Space style={{color: "#1890ff", margin: "0px 35px"}}>剩余设备:{props.sum}</Space>

                <Drawer
                    title="新增分组"
                    placement="right"
                    width={500}
                    onClose={onClose}
                    open={open}
                    extra={
                        <Space>
                            <Button onClick={onClose}>取消</Button>
                            <Button type="primary" onClick={addConfirm}>确认</Button>
                        </Space>
                    }
                >
                    <Form layout="vertical" form={form}>
                        <Form.Item
                            name="name"
                            label="片区名"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入片区名',
                                },
                            ]}
                        >
                            <Input placeholder="请输入片区名"/>
                        </Form.Item>

                        <Form.Item
                            name="number"
                            label="设备数量"
                            rules={[
                                {
                                    required: true,
                                    message: '请输入设备数量',
                                },
                            ]}
                        >
                            <Input placeholder="请输入设备数量" type="number"/>
                        </Form.Item>

                        <Form.Item
                            name="dateTime"
                            label="日期"
                            rules={[
                                {
                                    required: true,
                                    message: '请选择日期',
                                },
                            ]}
                        >
                            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="请选择时间"/>
                        </Form.Item>
                    </Form>
                </Drawer>
            </div>
        </ConfigProvider>

    )
}

export default Btn
